<template>
  <a-form :form="form" class="group">
    <div class="headers" style="white-space: nowrap">{{dataObj.name}}:</div>
    <div class="content">
      <rx-textboxlist  ref="valueList" v-model="values">
        <a-icon  type="setting" @click="openDialog(dataObj.type)" />
      </rx-textboxlist>
      <div v-if="show" class="grouptips">{{i18n('portalMobile.authDescription','如果勾选了')}}</div>
    </div>
    <div class="buttonlt" style="padding-top: 6px;white-space: nowrap;">
      <a-checkbox class="tabButton" v-model="exclude" @change="onChangeInclude" >{{i18n('portalMobile.notInclude','不包含')}}</a-checkbox>
    </div>
  </a-form>

</template>
<script>
  import InsPortalPermissionApi from '@/api/portal/core/insPortalPermission'
  import {BaseForm, RxDialog, Dialog,RxTextBoxList} from "@lowcode/jpaas-common-lib";
  export default {
    name: 'FormUserOrGroup',
    mixins: [BaseForm],
    components: {
      RxDialog,
      Dialog,
      RxTextBoxList
    },
    props: {
      dataObj: {
        type: Object,
        default: []
      },
        show: {
            type: Boolean,
            default: true
        },
    },
    data() {
      return {
        exclude:false,
        typeList: [],
        values: {
          value:"",
          text:""
        },
        valueList: {
          values: [],
          names: []
        },
      }
    },
    mounted() {
      if (this.dataObj.values) {
        this.getValues();
      }
    },
    methods: {
      i18n(name,text,key){
          return this.$ti18(name,text,"insPortalDef",key);
      },
      onChangeInclude(){
        this.dataObj.values = this.values.value;
        this.dataObj.names = this.values.text;
        this.dataObj.include = ! this.exclude;
        this.$emit("change", this.dataObj);
      },
      openDialog(btn) {
        var method = " this.func_" + btn + "()";
        eval(method);
      },
      func_subGroup() {
        this.selectGroups();
      },
      func_group() {
        this.selectGroups();
      },
      selectGroups() {
        let data = [];
        for(let i=0;i<this.valueList.values.length;i++){
          data[i]={groupId:this.valueList.values[i],name:this.valueList.names[i]}
        }
        let _obj = {
          key:"0",
          name:this.$comi18('form.haveSelectGroup', '上次已选择的用户组'),
          data:data
        }
        var conf = {curVm: this, data: {single: false,showDimId:true,initGroups:[_obj]}, widthHeight: ['900px', '700px']};
        Dialog.openGroupDialog(conf, function (self, data) {
          self.valueList.values=[];
          self.valueList.names=[];
          for (var i = 0; i < data.length; i++) {
            var obj = data[i];
            self.valueList.values.push(obj.groupId);
            self.valueList.names.push(obj.name);
          }
          self.sendChangeValue();
        })
      },
      func_user() {
        let data = [];
        for(let i=0;i<this.valueList.values.length;i++){
          data[i]={userId:this.valueList.values[i],fullName:this.valueList.names[i]}
        }
        var conf = {curVm: this, data: {single: false,initUsers:data}, widthHeight: ['1000px', '700px']};
        Dialog.openUserDialog(conf, function (self, users) {
          self.valueList.values=[];
          self.valueList.names=[];
          for (var i = 0; i < users.length; i++) {
            var obj = users[i];
            self.valueList.values.push(obj.userId);
            self.valueList.names.push(obj.fullName);
          }
          self.sendChangeValue();
        });
      },
      getValues() {
        this.exclude=!this.dataObj.include;
        var values = this.dataObj.values.split(",");
        var names = this.dataObj.names.split(",");
        for (var i = 0; i < values.length; i++) {
          this.valueList.values.push(values[i]);
          this.valueList.names.push(names[i]);
        }
        this.sendChangeValue();
      },
      sendChangeValue() {
        var changeValues = {
          value: this.valueList.values.join(","),
          text: this.valueList.names.join(",")
        };
        this.$refs.valueList.clearValue();
        this.$refs.valueList.setValues(changeValues, false);
      },
    },
    watch: {
      values: function (val) {
        this.dataObj.values = val.value;
        this.dataObj.names = val.text;
        this.dataObj.include = ! this.exclude;
        this.$emit("change", this.dataObj);
          if(val.value){
              var changeValues = {
                  values: val.value.split(","),
                  names: val.text.split(",")
              };
              this.valueList = changeValues;
          }else {
              this.valueList= {
                  values: [],
                  names: [],
              }
          }
      }
    }
  }
</script>

<style scoped>
  .tabButton {
    vertical-align: middle;
  }
  .headers{
    padding-bottom: 10px;
    font-weight: bold;
    width: 170px;
    overflow: hidden;
  }
  .ant-form-inline .ant-form-item {
    display: block;
  }
  .group{
    display:flex;
      flex-direction: column;
  }
  .buttonlt{
    width: 100px;
  }
  .content{
    flex:1;
  }
  .grouptips{
    font-size: 12px;
    color: #8a9199;
  }
</style>